<template>
  <div>
    性别：
    <span
      v-for="item in genders"
      :key="item"
      class="box"
      @click="selectGender(item)"
      :class="{active:item===gender}"
    >{{item}}</span>
  </div>
</template>
<script>
export default {
  props: {
    genders: Array,
  },
  data(){
return {
    gender:''
}
  },
  methods: {
    selectGender(gender) {
        this.gender=gender;
      console.log("select gender ", gender);
      this.$emit("onSelectGender", gender);
    },
  },
};
</script>
<style scoped>
.box {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid gray;
  padding: 4px;
}

.active {
  background: pink;
}
</style>